<template>
    <el-card class="box-card" :body-style="{ height: '100%' }">
        <template #header>
            <div class="card-header">
                <div>
                    <div class="colorBar"></div>
                    <div>{{ title.text }}</div>
                </div>
                <div class="legendData">
                </div>
                <div>
                    更多
                </div>
            </div>
        </template>
        <div id="bar" style="width: 100%; height: 500px"></div>
    </el-card>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, onUpdated, reactive, ref, type VNodeRef, watch } from 'vue';
import { userDashoardMonthApi, userDashoardWeekApi, userDashoardDayApi } from '@/services/dashoard'
import { deepCopy } from '@/utils/Tools/deepCopy';

onMounted(async () => {
    const myChart = echarts.init(document.getElementById('bar'));
    updateChart(myChart);
});
const title = reactive({ text: '客户意向分析 ' });
const updateChart = (myChart: echarts.ECharts) => {
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    });
}

</script>
  
<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    width: 100%;

    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-self: center;

        div {
            display: flex;
            justify-content: space-between;
            align-self: center;
        }

        .card-header {
            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }

            li {
                float: left;
            }

            .legendData {
                cursor: pointer;
            }

            .liColor {
                width: 20px;
                height: 10px;
                // background-color: red;
                cursor: pointer;
                margin: 0 10px;
            }
        }
    }


}

.el-card__body {
    height: 100%;
}
</style>
  